<template>
  <div class="Effectives">
    <div class="center">
      <div class="yyuan">
        <div class="yyleft">
          <ul class="entitle">
            <li>软</li>
            <li>件</li>
            <li>介</li>
            <li>绍</li>
          </ul>
          <p class="flower"><img src="../assets/flower.png" /></p>
          <div class="flcenter">
            <div class="weright">
              <div class="weritop" v-for="(item, index) in wel" :key="index">
                <dl>
                  <dt><img :src="item.thumb" alt="" /></dt>
                  <dd v-html="item.content"></dd>
                </dl>
                <!-- <router-link
                  :to="{ name: 'Longdetail', params: { id: item.id } }"
                  class="more"
                  >查看更多 >></router-link
                > -->
              </div>
            </div>
            <!-- weright -->
          </div>
          <div class="btm">
            <router-link to="/" class="btmlj">立即验方</router-link>
          </div>
          <p class="flower"><img src="../assets/flower.png" /></p>
        </div>
        <div class="yyright">
          <Hotright></Hotright>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Hotright from "@/components/Hotright.vue";
export default {
  name: "Effectives",
  components: {
    Hotright,
  },
  data: function() {
    return {
      wel: [
        // {
        //   image: require("../assets/ruanjian.png"),
        //   content:
        //     "安徵尚养居健康管理有限公司，是一家集康复理疗、健康养生、保健美容、产品研发、生产、营销于一体便利。公司拥有裹养尚灸注册商标，组织机构完善，部门有产品研发部、市场部、技术部、财务部、人事部、售后服务部等位于大湖名城、创新高地的安微省会合肥市，交通十分便利。公司拥有裹——养尚灸注册商标",
        //   content2:
        //     "城创新高地的安徽省会合肥市,交通十部...安徽尚养居健康管理有限公司，是一家集康复理疗、健康养生、保健美容、产品研发、生产、营销于创新高地的安徵省会合肥市，交通十分便于一体的高新技术企业，位于大湖名城、创新高地的安徽省会合肥市，交通十部...",
        // },
      ],
    };
  },
  mounted() {
    axios.post("/Qufugongyi/index").then((res) => {
      this.wel = res.data.data;
      // console.log(this.wel);
      for (let i = 0; i < res.data.data.length - 2; i++) {
        this.wel.push(res.data.data[i]);
      }
    });
    // .catch((err) => {
    //   console.log(err);
    // });
  },
};
</script>

<style scoped>
.Effectives {
  width: 100%;
  /* padding: 1rem 0; */
  background-color: #fce7d7;
}
.entitle {
  width: 32%;
  text-align: center;
  margin: 0 auto;
  overflow: hidden;
  /* margin-top: 5rem; */
}
.entitle li {
  float: left;
  width: 70px;
  height: 70px;
  line-height: 70px;
  background-color: #a40100;
  text-align: center;
  font-size: 38px;
  font-family: "楷体";
  color: #fff;
  border-radius: 40px;
  margin-right: 10px;
}
.yyuan {
  width: 100%;
  padding-left: 3%;
  padding-bottom: 4rem;
  display: flex;
  justify-content: space-between;
  margin-top: 102px;
}
.yyuan .yyleft {
  width: 65%;
  /* border: 1px solid #f00; */
}
.yyuan .yyright {
  width: 25%;
  margin-top: 3rem;
  /* border: 1px solid #f00; */
}
.flcenter {
  position: relative;
  width: 88%;
  margin: 0 auto;
  padding-top: 1rem;
  padding-bottom: 3rem;
  /* border: 1px solid #f00; */
}
.weright {
  width: 100%;
}
.weritop:nth-child(even) dl {
  /* 弹性盒子起点右边 */
  flex-direction: row-reverse;
}
.weritop:nth-child(even) .more {
  float: left;
}
.weright dl {
  width: 100%;
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
}
.weright dl dt {
  width: 42%;
  margin-top: 1rem;
}
.weright dl dd {
  width: 55%;
  color: #5a5653;
  text-indent: 2rem;
  line-height: 1.6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 10;
  overflow: hidden;
  -webkit-box-orient: vertical;
}
.weright dl dt img {
  display: block;
  width: 90%;
  margin: 0 auto;
}
.weribtm {
  margin-top: 5rem;
}
.btm {
  width: 246px;
  height: 60px;
  margin: 0 auto;
  background: #9e290b;
  text-align: center;
  border-radius: 33px;
}
.btmlj {
  width: 97px;
  height: 23px;
  font-size: 24px;
  font-family: "Adobe Heiti Std";
  font-weight: normal;
  color: #e8d6d3;
  line-height: 60px;
}
.entitle {
  margin: 1rem auto;
}
</style>
